<%--
  Created by IntelliJ IDEA.
  User: 我爱陈果果
  Date: 2020/8/18
  Time: 15:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--导入标签和访问路径--%>
<%@ include file="_linkPages/basePath.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>登录页面</title>
    <%--导入头部的样式和脚本--%>
    <%@ include file="_linkPages/staticHeader.jsp"%>
    <%--css--%>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
    <link rel="stylesheet" href="assets/css/ace-fonts.css" />
    <link rel="stylesheet" href="assets/css/ace.min.css" id="main-ace-style" />

</head>
</head>

<body class="login-layout blur-login">
<div class="main-container">
    <div class="main-content">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="login-container">
                    <div class="center">
                        <h1>
                            <span class="white">系统后台登陆</span>
                        </h1>
                    </div>

                    <div class="space-6"></div>

                    <div class="position-relative">
                        <div id="login-box" class="login-box visible widget-box no-border">
                            <div class="widget-body">
                                <div class="widget-main">
                                    <h4 class="header blue lighter bigger">
                                        <i class="ace-icon fa fa-coffee green"></i>
                                        输入登录信息
                                    </h4>

                                    <div class="space-6"></div>

                                    <form action="${basePath}login" method="post" onsubmit="return checkLogin(this)">
                                        <fieldset>

                                            <%--成功提示--%>
                                            <c:if test="${not empty result and result}">
                                                <div class="alert alert-block alert-success">
                                                    <button type="button" class="close" data-dismiss="alert">
                                                        <i class="ace-icon fa fa-times"></i>
                                                    </button>

                                                    <p>
                                                        <strong>
                                                            <i class="ace-icon fa fa-check"></i>
                                                                ${msg}
                                                            <c:remove var="result" scope="session"/>
                                                            <c:remove var="msg" scope="session"/>
                                                        </strong>
                                                    </p>
                                                </div>
                                            </c:if>

                                            <%--提示--%>
                                            <div class="alert alert-danger" id="msgDiv" style="display: ${empty result or result?'none':'display'};">
                                                <button type="button" class="close" data-dismiss="alert">
                                                    <i class="ace-icon fa fa-times"></i>
                                                </button>

                                                <strong>
                                                    <i class="ace-icon fa fa-times"></i>
                                                    <span id="msg">${msg}</span>
                                                    <c:remove var="result" scope="session"/>
                                                    <c:remove var="msg" scope="session"/>
                                                </strong>

                                                <br />
                                            </div>

                                            <div class="alert alert-danger" id="msgDiv" style="display: ${empty result or result?'none':'display'};">
                                                <button type="button" class="close" data-dismiss="alert">
                                                    <i class="ace-icon fa fa-times"></i>
                                                </button>

                                                <strong>
                                                    <i class="ace-icon fa fa-times"></i>
                                                    <span id="msg">${msg}</span>
                                                    <c:remove var="result" scope="session"/>
                                                    <c:remove var="msg" scope="session"/>
                                                </strong>

                                                <br />
                                            </div>

                                            <input type="hidden" name="method" value="login"/>
                                            <label class="block clearfix">
                                                <span class="block input-icon input-icon-right" data-rel="tooltip" data-placement="bottom" title="长度5-15，只能为字母、数字、下划线">
                                                    <input type="text" name="username" id="username" class="form-control" placeholder="用户名" />
                                                    <i class="ace-icon fa fa-user"></i>
                                                </span>
                                            </label>


                                            <label class="block clearfix">
														<span class="block input-icon input-icon-right" data-rel="tooltip" data-placement="bottom" title="长度5-15，只能为字母、数字、下划线">
															<input type="password" name="password" class="form-control" placeholder="密码" />
															<i class="ace-icon fa fa-lock"></i>
														</span>
                                            </label>

                                            <div class="space"></div>

                                            <div class="clearfix">
                                                <label class="inline">
                                                    <input type="checkbox" class="ace" />
                                                    <span class="lbl"> 记住我</span>
                                                </label>

                                                <button type="submit" class="width-35 pull-right btn btn-sm btn-primary">
                                                    <i class="ace-icon fa fa-key"></i>
                                                    <span class="bigger-110">登录</span>
                                                </button>
                                            </div>

                                            <div class="space-4"></div>
                                        </fieldset>
                                    </form>

                                </div><!-- /.widget-main -->

                                <div class="toolbar clearfix">
                                    <div>
                                        <a href="#" data-target="#forgot-box" class="forgot-password-link">
                                            <i class="ace-icon fa fa-arrow-left"></i>
                                            忘记密码
                                        </a>
                                    </div>

                                    <div>
                                        <a href="#" data-target="#signup-box" class="user-signup-link">
                                            用户注册
                                            <i class="ace-icon fa fa-arrow-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div><!-- /.widget-body -->
                        </div><!-- /.login-box -->

                        <div id="forgot-box" class="forgot-box widget-box no-border">
                            <div class="widget-body">
                                <div class="widget-main">
                                    <h4 class="header red lighter bigger">
                                        <i class="ace-icon fa fa-key"></i>
                                        重置密码
                                    </h4>

                                    <div class="space-6"></div>
                                    <p>
                                        输入您注册时候的email，用以接收密码重置信息
                                    </p>

                                    <form>
                                        <fieldset>
                                            <label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input type="email" class="form-control" placeholder="Email" />
															<i class="ace-icon fa fa-envelope"></i>
														</span>
                                            </label>

                                            <div class="clearfix">
                                                <button type="button" class="width-35 pull-right btn btn-sm btn-danger">
                                                    <i class="ace-icon fa fa-lightbulb-o"></i>
                                                    <span class="bigger-110">发送!</span>
                                                </button>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div><!-- /.widget-main -->

                                <div class="toolbar center">
                                    <a href="#" data-target="#login-box" class="back-to-login-link">
                                        返回登录
                                        <i class="ace-icon fa fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div><!-- /.widget-body -->
                        </div><!-- /.forgot-box -->

                        <div id="signup-box" class="signup-box widget-box no-border">
                            <div class="widget-body">
                                <div class="widget-main">
                                    <h4 class="header green lighter bigger">
                                        <i class="ace-icon fa fa-users blue"></i>
                                        新用户注册
                                    </h4>

                                    <div class="space-6"></div>
                                    <p> 输入详细信息: </p>

                                    <form action="${basePath}login" onsubmit="return checkedReg(this)" method="post">
                                        <fieldset>
                                            <%--提示--%>
                                            <div class="alert alert-danger" id="msgDivReg" style="display: none;">
                                                <button type="button" class="close" data-dismiss="alert">
                                                    <i class="ace-icon fa fa-times"></i>
                                                </button>

                                                <strong>
                                                    <i class="ace-icon fa fa-times"></i>
                                                    <span id="msgReg"></span>
                                                </strong>

                                                <br />
                                            </div>
                                            <input type="hidden" name="method" value="reg"/>
                                            <label class="block clearfix">
														<span class="block input-icon input-icon-right" data-rel="tooltip" data-placement="bottom" title="长度5-15，只能为字母、数字、下划线">
															<input type="text" name="username" id="regUsername" class="form-control" placeholder="用户名" onblur="checkUsername(this)"/>
															<i class="ace-icon fa fa-user"></i>
														</span>
                                            </label>

                                            <label class="block clearfix">
														<span class="block input-icon input-icon-right" data-rel="tooltip" data-placement="bottom" title="长度5-15，只能为字母、数字、下划线">
															<input type="password" name="password" id="regpassword" class="form-control" placeholder="密码" />
															<i class="ace-icon fa fa-lock"></i>
														</span>
                                            </label>

                                            <label class="block clearfix">
														<span class="block input-icon input-icon-right" data-rel="tooltip" data-placement="bottom" title="长度5-15，只能为字母、数字、下划线">
															<input type="password" name="rePassword" id="rePassword" class="form-control" placeholder="确认密码" />
															<i class="ace-icon fa fa-retweet"></i>
														</span>
                                            </label>

                                            <label class="block">
                                                <input type="checkbox" class="ace" />
                                                <span class="lbl">
															我接受
															<a href="#">用户协议</a>
														</span>
                                            </label>

                                            <div class="space-24"></div>

                                            <div class="clearfix">
                                                <button type="reset" class="width-30 pull-left btn btn-sm">
                                                    <i class="ace-icon fa fa-refresh"></i>
                                                    <span class="bigger-110">重置</span>
                                                </button>

                                                <button type="submit" class="width-65 pull-right btn btn-sm btn-success">
                                                    <span class="bigger-110">注册</span>

                                                    <i class="ace-icon fa fa-arrow-right icon-on-right"></i>
                                                </button>
                                            </div>
                                        </fieldset>
                                    </form>
                                </div>

                                <div class="toolbar center">
                                    <a href="#" data-target="#login-box" class="back-to-login-link">
                                        <i class="ace-icon fa fa-arrow-left"></i>
                                        返回登录
                                    </a>
                                </div>
                            </div><!-- /.widget-body -->
                        </div><!-- /.signup-box -->
                    </div><!-- /.position-relative -->

                </div>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.main-content -->
</div><!-- /.main-container -->

<!-- basic scripts -->

<!-- inline scripts related to this page -->
<script type="text/javascript">

    window.onload = function(){
        //jQuery = $
    }

    jQuery(function($) {
        $(document).on('click', '.toolbar a[data-target]', function(e) {
            e.preventDefault();
            var target = $(this).data('target');
            $('.widget-box.visible').removeClass('visible');//hide others
            $(target).addClass('visible');//show target
        });

        $('[data-rel=tooltip]').tooltip();
    });
    
    function checkLogin(frm) {
        let username = frm.username.value;
        let password = frm.password.value;
        //document对象
        let doUsername = document.getElementById("username");
        //获取单个属性
        //doUsername.getAttribute("name");
        // console.log(doUsername.value);
        // console.log(doUsername);
        //如果想调用jQuery的方法，必须是jQuery对象
        //let jqUsername = jQuery("#username");
        // let jqUsername = $("#username");
        // console.log(jqUsername.val());
        // console.log(jqUsername);
        //document.getElementsByName("");
        //$('input[name=username]');

        //显示错误信息div块
        let msgDiv = document.getElementById("msgDiv");

        //显示错误信息的位置
        let msg = document.getElementById("msg");

        //用户名和密码的正则表达式
        let userReg = /^\w{5,15}$/;
        let pwdReg = /^\w{5,15}$/;
        if (!userReg.test(username)) {
            msg.innerHTML = '用户名不符合要求';
            msgDiv.style.display = 'block';
            return false;
        }

        if (!pwdReg.test(password)) {
            msg.innerHTML = '密码不符合要求';
            msgDiv.style.display = 'block';
            return false;
        }

        //继续隐藏
        msgDiv.style.display = 'none';
        return true;
    }

    /**
     * 核对用户名是否存在
     */
    function checkUsername(obj) {
        let username = obj.value;
        //显示错误信息div块
        let msgDiv = document.getElementById("msgDivReg");
        //显示错误信息的位置
        let msg = document.getElementById("msgReg");
        //当用户名符合要求之后，判断用户名是否已注册
        $.get("${basePath}login?method=checkUsername&username="+username, function (data) {
            if (data == -1) {
                msg.innerHTML = '用户名已存在';
                msgDiv.style.display = 'block';
                return false;
            } else {
                //没有被注册，隐藏信息
                msg.innerHTML = '';
                msgDiv.style.display = 'none';
            }
        });
    }

    /**
     * 核对注册信息
     * @param frm
     * @returns {boolean}
     */
    function checkedReg(frm) {
        let username = frm.username.value;
        let password = frm.password.value;
        let rePassword = frm.rePassword.value;
        //显示错误信息div块
        let msgDiv = document.getElementById("msgDivReg");
        //显示错误信息的位置
        let msg = document.getElementById("msgReg");

        //用户名和密码的正则表达式
        let userReg = /^\w{5,15}$/;
        let pwdReg = /^\w{5,15}$/;
        if (!userReg.test(username)) {
            msg.innerHTML = '用户名不符合要求';
            msgDiv.style.display = 'block';
            return false;
        }
        //当用户名符合要求之后，判断用户名是否已注册
        $.get("${basePath}login?method=checkUsername&username="+username, function (data) {
            if (data == -1) {
                msg.innerHTML = '用户名已存在';
                msgDiv.style.display = 'block';
                return false;
            }
        });

        if (!pwdReg.test(password)) {
            msg.innerHTML = '密码不符合要求';
            msgDiv.style.display = 'block';
            return false;
        }

        if (password != rePassword) {
            msg.innerHTML = '两次密码不一致';
            msgDiv.style.display = 'block';
            return false;
        }
        //继续隐藏
        msgDiv.style.display = 'none';
        return true;

    }

</script>
<script src="assets/js/ace-extra.min.js"></script>
<script src="assets/js/bootbox.min.js"></script>

<script src="assets/js/bootstrap.min.js"></script>

</body>
</html>
